<template>
  <view class="activity-item">
    <u-image :src="row.cover_img" width="100%" height="284rpx" />
    <view class="item-bottom">
      <view>
        <u-text
          :text="row.title"
          lines="1"
          size="28rpx"
          color="#222222"
          line-height="50rpx"
        />
        <u-text
          :text="`时间：${row.start_time}——${row.end_time}`"
          lines="1"
          size="24rpx"
          color="#979797"
          line-height="50rpx"
        />
        <u-text
          :text="`地点：${row.address}`"
          lines="1"
          size="24rpx"
          color="#979797"
          line-height="50rpx"
        />
      </view>
      <view>
        <view class="btn" @click="handleDetail">查看详情</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    // 跳转详情
    handleDetail() {
      uni.navigateTo({ url: "/pages/home/activityDetail?id=" + this.row.id });
    },
  },
};
</script>

<style lang="scss" scoped>
.activity-item {
  margin: 0 20rpx 30rpx 20rpx;
  height: 436rpx;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  .item-bottom {
    display: flex;
    align-items: center;
    > view:first-child {
      flex: 1;
    }
    > view:last-child {
      width: 172rpx;
      .btn {
        width: 100%;
        height: 56rpx;
        color: $active-color;
        text-align: center;
        line-height: 56rpx;
        font-size: 28rpx;
        border-radius: 28rpx;
        background-color: #e9f4f4;
        &:active {
          background-color: #c2dcda;
        }
      }
    }
  }
}
</style>
